<template>
  <div class="bg">
    <transition-group name="fade">
      <gansu
        class="child"
        v-if="name == '甘肃省'"
        key="0"
        @activeIndex="clickIndex"
      />
      <jiuquan
        class="child"
        v-else-if="name == '酒泉市'"
        key="1"
        @activeIndex="clickIndex"
      />
      <jiayuguan
        class="child"
        v-else-if="name == '嘉峪关市'"
        key="2"
        @activeIndex="clickIndex"
      />
      <zhangye
        class="child"
        v-else-if="name == '张掖市'"
        key="3"
        @activeIndex="clickIndex"
      />
      <jinchang
        class="child"
        v-else-if="name == '金昌市'"
        key="4"
        @activeIndex="clickIndex"
      />
      <wuwei
        class="child"
        v-else-if="name == '武威市'"
        key="5"
        @activeIndex="clickIndex"
      />
      <qingyang
        class="child"
        v-else-if="name == '庆阳市'"
        key="6"
        @activeIndex="clickIndex"
      />
      <baiyin
        class="child"
        v-else-if="name == '白银市'"
        key="7"
        @activeIndex="clickIndex"
      />
      <lanzhou
        class="child"
        v-else-if="name == '兰州市'"
        key="8"
        @activeIndex="clickIndex"
      />
      <dingxi
        class="child"
        v-else-if="name == '定西市'"
        key="9"
        @activeIndex="clickIndex"
      />
      <linxia
        class="child"
        v-else-if="name == '临夏回族自治州'"
        key="10"
        @activeIndex="clickIndex"
      />
      <pingliang
        class="child"
        v-else-if="name == '平凉市'"
        key="11"
        @activeIndex="clickIndex"
      />
      <tianshui
        class="child"
        v-else-if="name == '天水市'"
        key="12"
        @activeIndex="clickIndex"
      />
      <gannan
        class="child"
        v-else-if="name == '甘南藏族自治州'"
        key="13"
        @activeIndex="clickIndex"
      />
      <longnan
        class="child"
        v-else-if="name == '陇南市'"
        key="14"
        @activeIndex="clickIndex"
      />
    </transition-group>
  </div>
</template>

<script>
import gansu from "./components/gansu.vue";
import lanzhou from "./components/lanzhou.vue";
import jiuquan from "./components/jiuquan.vue";
import jiayuguan from "./components/jiayuguan.vue";
import zhangye from "./components/zhangye.vue";
import jinchang from "./components/jinchang.vue";
import wuwei from "./components/wuwei.vue";
import qingyang from "./components/qingyang.vue";
import baiyin from "./components/baiyin.vue";
import dingxi from "./components/dingxi.vue";
import linxia from "./components/linxia.vue";
import pingliang from "./components/pingliang.vue";
import tianshui from "./components/tianshui.vue";
import gannan from "./components/gannan.vue";
import longnan from "./components/longnan.vue";
export default {
  data() {
    return {
      name: "甘肃省"
    };
  },
  components: {
    gansu,
    lanzhou,
    jiuquan,
    jiayuguan,
    zhangye,
    jinchang,
    wuwei,
    qingyang,
    baiyin,
    dingxi,
    linxia,
    pingliang,
    tianshui,
    gannan,
    longnan
  },
  mounted() {
    this.$nextTick(() => {});
  },
  methods: {
    clickIndex(val) {
      console.log(val);
      this.name = val;
    }
  }
};
</script>

<style lang="sss" scoped>
.bg {
  width: 100%;
  height: 88vh;
  background: url("../../../../assets/img/bj.png") no-repeat center;
  background-size: 100% 100%;
  position: relative;
}
.child{
  position: absolute;
  top: 0;
  left: 0;
}
 /* 进入样式 */
  .fade-enter {
    opacity: 0;
    transform: scale(0);
  }
  .fade-enter-to {
    opacity: 1;
     transform: scale(1);
  }
  .fade-enter-active {
    transition: all 1s;
  }

  /* 离开样式 */
  .fade-leave {
   opacity: 1;
    transform: scale(1);
  }
  .fade-leave-to {
   opacity: 0;
    transform: scale(0);
  }
  .fade-leave-active {
   transition: all 1s;
  }
</style>
